<template>
    <view class="form-container">
        <view class="smart-panel-head">
            <view class="smart-panel-head-title">form</view>
        </view>
        <form @submit="formSubmit" @reset="formReset">
            <view class="uni-form-item uni-column">
                <view class="title">姓名</view>
                <input class="uni-input" name="nickname" placeholder="请输入姓名" />
            </view>
            <view class="uni-form-item uni-column">
                <view class="title">性别</view>
                <radio-group name="gender">
                    <radio value="男">男</radio>
                    <radio value="女">女</radio>
                </radio-group>
            </view>
            <view class="uni-form-item uni-column">
                <view class="title">爱好</view>
                <checkbox-group name="loves">
                    <checkbox value="读书">读书</checkbox>
                    <checkbox value="写字">写字</checkbox>
                </checkbox-group>
            </view>
            <view class="uni-form-item uni-column">
                <view class="title">年龄</view>
                <slider value="20" name="age" show-value />
            </view>
            <view class="uni-form-item uni-column">
                <view class="title">保留选项</view>
                <switch name="switch" />
            </view>
            <view class="uni-btn-v">
                <button form-type="submit">Submit</button>
                <button type="default" form-type="reset">Reset</button>
            </view>
        </form>
    </view>
</template>

<script>
    export default {
        data() {
            return {

            }
        },
       methods: {
       			formSubmit: function(e) {
       				console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
       				var formdata = e.detail.value
       				uni.showModal({
       					content: '表单数据内容：' + JSON.stringify(formdata),
       					showCancel: false
       				});
       			},
       			formReset: function(e) {
       				console.log('清空数据')
       			}
       		}
       	}
</script>

<style>
.uni-btn-v{
	width: 95%;
	padding: 5px;
	color: #fff;
	border-radius: 5px;
	font-size: 16px;
	margin-top: 20px;
	
}
</style>